import React, { PureComponent } from "react";
import { connect } from "dva";
import router from 'umi/router';
import { Card, Icon,Button,Tree, Input  } from "antd";
import styles from "./component.less";
import DistrictTree from "./DistrictTree";

@connect()
export default class VideoAction extends PureComponent {
  constructor(props) {
    super(props);
    const { TreeNode } = Tree;
    const Search = Input.Search;
    this.state = {
      key:"district"
    };

  }

  componentDidMount() {

  }

  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
  }

  render() {
    //const {warnMonitor,loading } = this.props;

    // const columns = [{
    //   dataIndex: 'warnCode',
    //   render: text=> <span><Icon type="warning" style={{color:'#f22',marginRight:10}}/>{text}</span>
    // },{
    //   dataIndex: 'warnCon',
    //   align:'right',
    //   render: text=> <span>{text}</span>
    // }];
    const tabList = [{
      key: 'district',
      tab: '区域',
    }, {
      key: 'selfDefine',
      tab: '自定义组',
    }];
    
    const contentList = {
      district: <DistrictTree/>,
      selfDefine: <p>content2</p>,
    };

    return (
      <div>
        <Card
          style={{ width: '100%' }}
          tabList={tabList}
          activeTabKey={this.state.key}
          onTabChange={(key) => { this.onTabChange(key, 'key'); }}
        >
        {contentList[this.state.key]}
        </Card>
      </div>
    );
  }
}
